<template>
    <div>

      <el-table
        size="medium"
        :data="tableData"
        border
        row-key="id"
        @row-click="tableRowClick"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          header-align="center"
          label="里程碑/任务名称">
          <template slot-scope="scope">

            <span v-if="(!scope.row.children || !scope.row.children.length) && scope.row.level == 1" style="padding-left: 25px">  </span>
            <span>{{scope.row.task_name}}</span>

          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="duration"
          label="工期（天）"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="foreground_task_name"
          label="前置任务"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          label="任务进度"
          width="100">
          <template slot-scope="scope">
            <span>{{scope.row.task_progress}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="person"
          label="负责人"
          width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.person_in_charge && scope.row.person_in_charge.member_id">
              {{scope.row.person_in_charge.member_name}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="任务状态"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">未启动</span>
            <span v-if="scope.row.status == 1">进行中</span>
            <span v-if="scope.row.status == 2">暂停</span>
            <!--        <span v-if="datas.status == 3">延期</span>-->
            <span v-if="scope.row.status == 4">待验收</span>
            <span v-if="scope.row.status == 5">验收不通过</span>
            <span v-if="scope.row.status == 6">已完成</span>
            <span v-if="scope.row.delay_day == 3">延期({{scope.row.delay_day}}天)</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="startDate"
          label="计划开始日期"
          width="150">
          <template slot-scope="scope">

            <span>{{scope.row.startDate}}</span>

          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="endDate"
          label="计划结束日期"
          width="150">
          <template slot-scope="scope">

            <span>{{scope.row.endDate}}</span>

          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="days"
          label="参与人"
          width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.task_member && scope.row.task_member.length > 0">
              <el-popover
                placement="top-start"
                width="100"
                trigger="hover">
                <div>
                  <div v-for="item in scope.row.task_member" style="padding-bottom: 5px">
                    <i class="el-icon-user">{{  item.member_name}}</i>
                  </div>
                </div>
                <i slot="reference" class="el-icon-user">{{scope.row.task_member.length}}</i>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="阶段性评审"
          width="50">
          <template slot-scope="scope">
            <span>{{scope.row.periodical_review?'是':'否'}}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="里程碑/任务"
        :visible.sync="dialogVisible"
        width="800px"
        :before-close="handleClose">

        <task-view :datas="taskData"></task-view>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
  import taskView from "./taskView";
    export default {
        name: "projectTaskView",
        components:{taskView},
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{member:[]}
                }
            }
        },
        watch:{
            datas:{
                handler:function(newV,oldV){
                    this.setData(newV);
                },
                deep:true,
                immediate:true,
            }
        },
        data:function(){
            return{
                tableData:[],
                dialogVisible:false,
                taskData:{},
            }
        },
        methods:{
            handleClose:function(){
                this.dialogVisible = false;
            },
            setData:function(newval){

                if(newval){
                    let data = newval;
                    if (data.project_task){
                        for (let i = 0; i < data.project_task.length; i++){
                            this.dealInitData(data.project_task[i]);
                        }
                        this.tableData = [...data.project_task];
                    }
                }
            },
            dealInitData:function(data){
                data.name = data.task_name;
                data.startDate = this.dealDateStr(new Date(data.start_date.replace(/-/g,'/')));
                data.endDate = this.dealDateStr(new Date(data.end_date.replace(/-/g,'/')));

                if (data.children){
                    for (let i = 0; i < data.children.length; i++){
                        this.dealInitData(data.children[i]);
                    }
                }
            },
            tableRowClick:function(row, column, event){
                // console.log(row, column, event)
                this.taskData = row;
                this.dialogVisible = true;
            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
        }
    }
</script>

<style scoped>

</style>
